<template>
    <span class="cart-button" :class="containerClass" @click="onClick">
        <span class="icon">&#xe613;</span>
        <span v-if="count" class="count">{{count}}</span>
    </span>
</template>

<script lang="ts">
import store from '@/store';
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'CartButton',
})
export default class CartButton extends Vue {
    /** 容器样式 */
    @Prop({ type: [ Object, Array ] }) public containerClass: any;

    /** 购物车信息 */
    public get cart() {
        return store.state.shop.cart || {};
    }
    public get cartList() {
        const list = [];
        for (const key in this.cart) {
            list.push(...this.cart[key]);
        }
        return list;
    }
    public get count() {
        return this.cartList.reduce((prev: any, next: any) => {
            return {
                count: prev.count + next.count,
            };
        }, {
            count: 0,
        }).count;
    }

    public onClick() {
        this.$emit('click');
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

.cart-button {
    position: fixed;
    display: inline-block;
    right: 20px;
    bottom: @button-large-height + 50px;
    width: 50px;
    height: 50px;
    text-align: center;
    background-color: @color-white;
    border: 2rpx solid @color-red;
    border-radius: 50%;
    .icon {
        font-size: 28px;
        line-height: 50px;
        color: @color-red;
    }
    .count {
        position: absolute;
        right: 0;
        top: 0;
        padding: 0 5px;
        .text-small();
        color: @color-white;
        background-color: @color-red;
        border-radius: @text-small-line-height;
    }
}

</style>
